<template>
<div class="person">
<h1 > 情况五:监视多个数据</h1>
<h2>姓名:{{ person.name }}</h2>
<h2>年龄:{{ person.age }}</h2>
<h2>车辆:{{ person.car.c1 }},{{ person.car.c2  }}</h2>
<hr>
<button @click="changeNmae">修改姓名</button>
<button @click="changeAge">修改年龄</button>
<button @click="changeC1">修改车1</button>
<button @click="changeC2">修改车2</button>
<button @click="changeCar">修改所有车辆</button>
</div>
</template>
<script setup lang="ts" name="person">
import {ref,reactive, computed,watch} from 'vue'

let person = reactive({
  name:'张三',
  age:30,
  car:{
    c1:'奔驰',
    c2:"宝马",
  }
})

// 方法
const changeNmae =()=>{
  person.name += '~'
}
const changeAge =()=>{
  person.age += 1
}
const changeC1 =()=>{
person.car.c1 = '奥迪'
}
const changeC2 =()=>{
  person.car.c2 = '大众'

}
const changeCar =()=>{
person.car = {c1:'雅迪',c2:'爱玛'}
}


// 监视 监视多个数据
watch([()=>person.car,()=>person.name],(newValue,oldValue)=>{
  console.log("person.car的变化",newValue,oldValue);
  
},{deep:true})
</script>

<style scoped>
button {
  margin: 0 5px;
}
.person {
  border-radius: 10px;
  background-color: #8ee6ea;
  margin: 20px;
}
li {
  font-size: 15px;
}
.person input{
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
